<template>
  <header class="page-header">
    <colorSelect style="margin: 0 10px" />
    <themeSelect style="margin: 0 10px" />
  </header>
</template>

<script lang="ts" setup name="page-header"></script>

<style lang="less" scoped>
.page-header {
  width: 100%;
  height: 60px;
  position: absolute;
  border-bottom: 1px solid @border-color-grey;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-right: 40px;
  box-sizing: border-box;
  top: 0;
  z-index: 2;
}
[data-theme='dark'] {
  .page-header {
    border-bottom: 1px solid @border-color-dark;
  }
}
</style>
